import {useNavigate} from "react-router-dom";
import {ChangeEventHandler, FC, useEffect, useState} from "react";
import {Box, TextField} from "@mui/material";
import DGDialogLayout from "../../../components/DGDialogLayout/DGDialogLayout.tsx";
import {Util} from "../../../sources/Util.ts";
import DGConnect from "../../../sources/DGConnect.ts";
import DGTextView from "../../../components/DGTextView.tsx";
import DGDrawerLayout from "../../../components/DGDrawerLayout/DGDrawerLayout.tsx";

interface DGLoginIndexProps {
    state: boolean,
    switchView: (text: string) => void
}

const DGLoginIndex: FC<DGLoginIndexProps> = ({state, switchView}) => {
    // 路由跳转
    const router = useNavigate();
    // 账户信息
    const [account, setAccount] = useState("");
    // 账户错误信息
    const [error, setError] = useState({state: false, text: ""});
    // 加载状态
    const [loading, setLoading] = useState(false);
    // 按钮文字
    const [text, setText] = useState("继续");
    // 确认解除
    const [n, setN] = useState(0);

    // 关闭控制
    const handleClose = () => {
        // 清空账号信息
        setAccount("");
        // 清空错误信息
        setError({state: false, text: ""});
        // 关闭
        switchView("");
        // 后退
        router(-1);
        // 设置文字
        setText("继续");
        // 设置默认
        setN(0);
    }

    // 更改账户信息
    const handleChangeAccount: ChangeEventHandler<HTMLInputElement> = (e) => {
        // 清空错误信息
        setError({state: false, text: ""});
        // 设置账号信息
        setAccount(e.target.value);
    }

    // 提交函数
    const handleSubmit = () => {
        // 清空错误信息
        setError({state: false, text: ""});
        // 判断用户名是否为空
        if (account === "") return setError({state: true, text: "账号输入不能为空！"});
        // 开始加载
        setLoading(true);
        // 发起验证账户请求
        DGConnect.POST(JSON.stringify({type: "login", username: account, enter: n}), result => {
            // 关闭加载
            setLoading(false);
            // 判断注销状态
            if (result["data"]["code"] === 207) {
                // 设置 SESSION
                Util.Storage.setSession("linked", result["data"]["result"]["session"]);
                // 设置按钮文字
                setText("解除注销");
                // 设置确认解除
                setN(1);
            }
            // 判断错误信息
            if (result["data"]["code"] !== 200) return setError({
                state: true, text: result["data"]["message"] + "错误码：" + result["data"]["code"]
            });
            // 设置 SESSION
            Util.Storage.setSession("linked", result["data"]["result"]["session"]);
            // 设置 邮箱信息
            Util.Storage.setSession("LOGIN-USERNAME", account);
            Util.Storage.setSession("LOGIN-EMAIL", result["data"]["result"]["email"]);
            // 成功跳转密码登陆
            switchView(result["data"]["result"]["func"]);
            // 设置文字
            setText("继续");
            // 设置默认
            setN(0);
        }, error => {
            // 关闭加载
            setLoading(false);
            // 设置错误信息
            setError({state: true, text: "遇到了一些问题，请尝试重试，或者及时联系我们！错误信息：" + error["stack"]});
        });
    }

    useEffect(() => {
        // 获取登陆信息
        const account = Util.Storage.getLocal("LOGIN-USER");
        // 设置账户信息
        if (account) setAccount(account["username"]);
    }, [state]);

    // DOM 节点
    const ContentView = (<>
        {/* 登录提示语 */}
        <DGTextView Body Bold>请输入您要登录的账号或邮箱。</DGTextView>
        {/* 账号输入框 */}
        <TextField
            margin="dense" label="账号/邮箱" variant="standard"
            value={account} onChange={handleChangeAccount}
            error={error.state} helperText={error.text}
            disabled={loading} fullWidth required/>
    </>);
    // 返回组件节点
    return (<Box>
        {/* DGDialogLayout 样式 */}
        <DGDialogLayout
            submit={{name: text, click: () => handleSubmit()}}
            more={{name: "更多", click: () => switchView("login_more")}}
            title="登录账号" state={state} close={() => handleClose()} load={loading} PANEL AUTO>
            {ContentView}
        </DGDialogLayout>
        {/*DGDrawerLayout 样式 */}
        <DGDrawerLayout
            submit={{name: text, click: () => handleSubmit()}}
            more={{name: "更多", click: () => switchView("login_more")}}
            title="登录账号" state={state} close={() => handleClose()} flex="bottom" load={loading} PANEL AUTO>
            {ContentView}
        </DGDrawerLayout>
    </Box>);
}
export default DGLoginIndex;